<template>
    <view>


        <view class="cardItem" v-for="(job,jobIndex) in list" :key="jobIndex" @tap="jobDetail"
            v-bind:style="'animation-delay:'+jobIndex*80+'ms'">
            <view class="title mdTitle Han">
                {{job.name}}
            </view>
            <view class="msg Han mdText">
                <text>{{job.address}}</text>
                <text v-if="job.isList">已上市</text>
                <text>{{job.numRange}}人</text>
            </view>

            <view class="tags mdText Han">
                <view class="tag" v-for="tag in job.tag">
                    {{tag}}
                </view>
            </view>

            <view class="hr">
                <image :src="job.photo" mode=""></image>
                <text class="md2Text">{{job.hr}}</text>
            </view>

            <text class="salary mdTitle Han">
                {{job.salary}}K
            </text>

            <text class="position md2Text Han">
                {{job.position}}
            </text>
        </view>
    </view>

</template>

<script>
    export default {
        data() {
            return {
                // jobList: [],
            }
        },

        props: {
            // 检测类型 + 其他验证
            list: {
                type: Array
            }
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {

        },

        methods: {
            jobDetail() {
                uni.navigateTo({
                    url: '/pages/views/detail/index'
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .cardItem {
        width: 100%;
        height: 275upx;
        background-color: #fff;
        margin: 10upx auto;
        padding-left: 32upx;
        position: relative;

        .title {
            color: #333;
            font-weight: normal;
            padding-top: 28upx;
        }

        .msg {
            padding-top: 20upx;
            color: #999999;

            text {
                padding-right: 30upx;
            }
        }

        .tags {
            display: flex;
            margin-top: 24upx;

            .tag {
                // width: 104upx;
                padding: 0 10upx;
                height: 42upx;
                line-height: 42upx;
                text-align: center;
                background-color: #F3FAFF;
                margin-right: 20upx;
            }
        }

        .hr {
            margin-top: 18upx;

            image {
                width: 72upx;
                height: 72upx;
                vertical-align: middle;
                margin-right: 10upx;
            }
        }

        .salary {
            position: absolute;
            color: #00aaef;
            top: 28upx;
            right: 36upx;
        }

        .position {
            position: absolute;
            color: #CCCCCC;
            right: 44upx;
            bottom: 42upx;
        }
    }
</style>
